<!-- 查看转账凭证 -->
<template>
  <el-dialog
    title="查看转账凭证"
    :visible.sync="visible"
    width="800px"
    @close="handleClose"
  >
    <!-- 转账凭证区域 -->
    <div class="voucher-section">
      <span class="label">转账凭证</span>
      <el-image
        style="
          width: 200px;
          height: 150px;
          margin-right: 10px;
          border: 1px solid #ddd;
        "
        :src="voucherData.voucherImg"
        fit="contain"
      ></el-image>
      <el-link type="primary" @click="viewFullVoucher">查看</el-link>
    </div>

    <!-- 上传人信息表格 -->
    <div class="info-section">
      <span class="label">上传人信息</span>
      <el-table
        :data="[voucherData.units]"
        border
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column prop="contact" label="联系人姓名"></el-table-column>
        <el-table-column prop="phonenumber" label="联系方式"></el-table-column>
        <el-table-column prop="unitName" label="单位"></el-table-column>
        <el-table-column
          prop="socialCreditCode"
          label="单位统一信用代码"
        ></el-table-column>
      </el-table>
    </div>

    <!-- 学员信息表格 -->
    <div class="info-section">
      <span class="label">学员信息</span>
      <el-table
        :data="voucherData.registrationDtoList"
        border
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column prop="studentName" label="学员"></el-table-column>
        <el-table-column prop="projectMap" label="报名项目" width="320" />
        <el-table-column prop="trainingClass" label="培训班"></el-table-column>
        <el-table-column prop="trainingType" label="培训类别">
          <template slot-scope="scope">
            {{ dict.training_type[Number(scope.row.trainingType)] }}
          </template>
        </el-table-column>
        <el-table-column prop="projectSum" label="费用" width="120" />
      </el-table>
    </div>

    <!-- 总费用 -->
    <div class="total-fee">
      <span class="label">总费用</span>
      <span>{{ form.totalFee }}</span>
    </div>

    <!-- 确认转账区域 -->
    <div class="confirm-section">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="confirmTransferred"
        >待确认资金池</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "ViewTransferVoucherDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    voucherData: {
      type: Object,
      default: () => ({}),
    },
    dict: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      form: {},
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.form = JSON.parse(JSON.stringify(this.voucherData));

        // 处理单位信息
        if (this.voucherData.units) {
          const unit = this.voucherData.units;
          this.form.unitName = unit.unitName || "";
          this.form.socialCreditCode = unit.socialCreditCode || "";
          this.form.administrativeArea = unit.administrativeArea || "";
          this.form.unitNature = unit.unitNature || "";
          this.form.contact = unit.contact || "";
          this.form.unitPhonenumber = unit.phonenumber || "";
        }

        // 处理学员信息
        if (
          this.voucherData.registrationDtoList &&
          Array.isArray(this.voucherData.registrationDtoList)
        ) {
          this.form.personList = this.voucherData.registrationDtoList.map(
            (student) => ({
              studentName: student.studentName,
              projectMap: student.projectMap || "",
              trainingClass: student.trainingClass || "",
              trainingType: student.trainingType || "",
              projectSum: student.projectSum || "0",
            })
          );
        } else {
          this.form.personList = [];
        }

        // 动态计算总费用
        this.calculateTotalFee();
      }
    },
  },
  methods: {
    calculateTotalFee() {
      if (
        this.voucherData.registrationDtoList &&
        Array.isArray(this.voucherData.registrationDtoList)
      ) {
        const total = this.voucherData.registrationDtoList.reduce(
          (sum, student) => {
            return sum + (parseFloat(student.projectSum) || 0);
          },
          0
        );
        this.form.totalFee = total + "元";
      }
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    viewFullVoucher() {
      // 可以使用 Element UI 的 Image Viewer 或新窗口打开
      window.open(this.voucherData.voucherImg, "_blank");
    },
    confirmTransferred() {
      this.$confirm(
        "是否确定继续操作？",
        "系统提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info",
        }
      )
        .then(() => {
          this.$message.success(
            "已完成！"
          );
          this.$emit("confirm-transferred", this.voucherData);
          this.handleClose();
        })
        .catch(() => {
          this.$message.info("已取消操作");
        });
    },
  },
};
</script>


<style scoped>
.voucher-section,
.info-section,
.total-fee,
.confirm-section {
  margin-bottom: 20px;
}
.label {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 10px;
}
.confirm-section {
  text-align: center;
}
.confirm-section p {
  margin-bottom: 15px;
}
</style>
